
<template>
    <div class="admin_table_handle_btn">

        <a-row type="flex">
            <a-col flex="200px" :span="5" style=" border-right: solid #1a1a1a 1px">
                <div style="width: 200px;">

                    <a-tree  show-line :default-expanded-keys="['0-0-0']" @select="onSelect">
                        <a-icon slot="switcherIcon" type="down" />
                        <a-tree-node key="0-0" :title="name">
                            <a-tree-node :key="index" :value="value.id" v-for="(value , index) in list" key="0-0-0" :title="value.name + '【'+value.code+'】' + value.ele" />.
                        </a-tree-node>
                    </a-tree>
                </div>

            </a-col>
            <a-col flex="20px" >
                <div style="width: 20px;">

                </div>

            </a-col>
            <a-col :flex="auto ">

                <div class="qingwu">
                    <div class="admin_table_page_title">线损</div>
                    <div class="unline underm"></div>


                    <a-form layout="inline" :form="form"  @submit="handleSubmit">

                        <a-form-item label="创建时间">

                            <a-range-picker v-model="change" @change="onChanged" />
                        </a-form-item>


                        <a-form-model-item >
                            <a-button icon="search" @click="search">
                                查询
                            </a-button>
                        </a-form-model-item>
                        <a-form-model-item >
                            <a-button  @click="reset">重置</a-button>
                        </a-form-model-item>

                    </a-form>
                </div>

                <div class="admin_table_list">
                    <a-table :columns="columns" :data-source="list" :pagination="false" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" row-key="id">

                <span slot="address" slot-scope="rows">
                    <span>{{rows.sys_region_province.name}} / {{rows.sys_region_city.name}} / {{rows.sys_region_county.name}} / {{rows.address}}</span>
                </span>
                        <span slot="agent_name" slot-scope="rows">
                    {{rows.sys_region_province.name}} / {{rows.sys_region_city.name}} / {{rows.sys_region_county.name}} / {{rows.address}}
                </span>

                        <span slot="status" slot-scope="rows">
                    <span v-if="rows.is_right ==2"  >
                        异常
                    </span>
                    <span v-else >正常</span>
                </span>

                        <span slot="statusd" slot-scope="rows">
                    <span >
                        分表
                    </span>
                </span>


                        <span slot="action" slot-scope="rows">
                    <a-button size="small" icon="edit" @click="$router.push('/Estate/ElectricCommunity/form/'+rows.id)">编辑</a-button>
                    <a-button size="small" icon="edit" @click="$router.push('/Estate/community/form/'+rows.id)">分区管理</a-button>
                    <a-button size="small" icon="edit" @click="$router.push('/Estate/community/form/'+rows.id)">采集器列表</a-button>
                    <br>
                    <a-button size="small" icon="edit" @click="$router.push('/Estate/community/form/'+rows.id)">线损统计</a-button>
                    <a-button size="small" type="danger"  @click="onChangeStatus('is_deleted',rows.id)">删除</a-button>
                </span>
                    </a-table>
                    <div class="admin_pagination" v-if="total > 0">
                        <a-pagination v-model="params.page" :page-size.sync="params.per_page" :total="total" @change="onChange" show-less-items />
                    </div>
                </div>
            </a-col>
        </a-row>




    </div>
</template>

<script>
export default {
    components: {},
    props: {},
    data() {
        return {
            params:{
                page:1,
                per_page:30,
            },
            total:0, //总页数
            selectedRowKeys:[], // 被选择的行
            columns:[
                {title:'#',dataIndex:'id',fixed:'left'},
                {title: '名称', dataIndex: 'name'},
                {title: '采集器',dataIndex: 'electric_collector.name' },
                {title: '类型', scopedSlots: { customRender: 'statusd'}},
                {title: '表号', dataIndex: 'tableAddress'},
                {title: '表地址', dataIndex: 'code'},
                {title: '总用量', dataIndex: 'ele'},
                {title: '总费用', dataIndex: 'cost'},
                {title: '最后上报度数', dataIndex: 'line_count'},
                {title: '最后上报时间', dataIndex: 'last_time'},
                {title: '状态', scopedSlots: { customRender: 'status' }},
            ],
            list:[],
            community_name:'',
            options:[],
            change:'',
            name:''
        };
    },
    watch: {},
    computed: {},
    methods: {
        // 选择框被点击
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys;
        },
        onChanged(date, dateString) {
            this.change = dateString
            // console.log(date, dateString);
        },
        // 选择分页
        onChange(e){
            this.params.page = e;
            this.onload();
        },

        // 搜索
        search(){
            this.params['change'] = this.change;
            this.$post(this.$api.estateElectricLineLoss,this.params).then(res=>{
                this.total = res.data.total;
                this.list = res.data.data;
            });
        },

        // 重置
        reset(){
            location.reload();
        },

        // 获取城市列表
        get_area(){
            this.$get(this.$api.sysRegion).then(res=>{
                this.options = res.data;
            })
        },
        // 获取代理人列表
        get_agent(){
            this.$get(this.$api.getAgent).then(res=>{
                this.agent_options = res.data;
            })
        },

        onload(){
            this.params['id'] =this.$route.params.id
            this.$post(this.$api.estateElectricLineLoss,this.params).then(res=>{
                this.total = res.data.list.total;
                this.list = res.data.list.data;
                this.name = res.data.name.name;
            });
        },

        onChangeStatus(type,id){
            this.$post(this.$api.editElectricCommunityStatus,{type:type,id:id}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.msg)
                }else{
                    return this.$message.error(res.msg)
                }
                this.onload();
            })
        }
    },
    created() {
        this.onload();
        this.get_area();
        this.get_agent();
    },
    mounted() {}
};
</script>
<style lang="scss" scoped>

</style>
